<template>
    <div class="scoreAll">
        <div class="basicInfo">
            <span>赛事名称：<b>xxx夏季网球大赛</b></span>
            <span>裁判长：<b>刘德华</b></span>
            <div class="btnGroup">
                <el-button type="primary" class='goMatchForm'>导出战表信息</el-button>
                <el-button type="info" plain  @click='goback'>返回</el-button>
            </div>
        </div>
        <div class="tableBox">
           <div class="date">
               <span>
                   比赛日期：
               </span>
                <el-date-picker v-model="date" type="date" placeholder="选择日期">
                </el-date-picker>
           </div>
            <table>
                    <thead>
                        <tr>
                            <td>场序</td>
                            <td>1号场地</td>
                            <td>2号场地</td>
                            <td>3号场地</td>
                            <td>4号场地</td>
                            <td>5号场地</td>
                            <td>6号场地</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                         <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                         <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                          <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                         <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                         <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                rankList:[
                  
                ],
                hasDiy:false,
                date:''
            }
        },
        methods:{
            diy(){
                this.hasDiy = true;
            },
            cancle(){
                this.hasDiy = false;
            },
            goback(){

            }
        }
    }
</script>
<style lang="less" scoped>
.scoreAll{
    padding:20px;
    .basicInfo{
        background: rgba(66,185,131,.1);
        border-radius: 2px;
        line-height: 40px;
        height: 40px;
        padding: 15px;
        overflow: hidden;
        span{
            margin-right:20px;
        }
        .btnGroup{
            height: 60px;
            float: right;
            margin-right:20px;
        }
    }
    .tableBox{
        box-shadow: 0px 2px 5px #eaeaea;
        margin-top:20px;
        border:1px solid #eaeaea;
        padding:10px;
        .date{
            padding-left:10px;
        }
        table{
            margin-top:10px;
            width: 100%;
            text-align: center;
            border-collapse:collapse;
            border-left:1px solid #eaeaea;
            border-top:1px solid #eaeaea;
            thead{
                tr{
                    height: 40px;
                    background-color: rgba(66, 185, 131, 0.1);
                    td{
                        border-right:1px solid #eaeaea;
                        border-bottom:1px solid #eaeaea;
                    }
                }
            }
            tbody{
                tr{
                    width: 100%;
                    height: 120px;
                    td{
                        border-right:1px solid #eaeaea;
                        border-bottom:1px solid #eaeaea;
                        input{
                            text-align: center;
                            width: 100px;
                            border:0;
                            height: 30px;
                            line-height: 30px;
                        }
                    }
                }
            }
        }
    }
}
</style>

